﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Autenticado/Paciente/Paciente.Master"
	AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Autenticado.Paciente.Default" %>

<%@ Register Assembly="ServerControls" Namespace="ServerControls" TagPrefix="cc1" %>
<asp:Content ID="GrillaContent" ContentPlaceHolderID="MainContent" runat="server">
	<asp:ScriptManager EnablePageMethods="true" runat="server" ID="AdminScriptManager" />
	<div class="container">
		<div class="panel">
			<div class="row">
				<div class="col-xs-12">
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="panel">
			<div class="row">
				<div class="col-xs-12">
					<div class="input-group">
						<span class="input-group-btn">
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="container" style="min-height: 600px">
		<cc1:PagingGridView ID="PacientesGridView" runat="server" AutoGenerateColumns="false"
			CssClass="col-xs-12" DataKeyNames="Id" OnRowCommand="PacientesGridView_RowCommand"
			RowStyle-HorizontalAlign="Center" OnRowDataBound="PacientesGridView_OnRowDataBound"
			PageSize="12" OnPageIndexChanging="PacientesGridView_PageIndexChanging">
			<Columns>
				<asp:TemplateField ItemStyle-Width="20px">
					<ItemTemplate>
						<a href="JavaScript:divexpandcollapse('div<%# Eval("Id") %>');">
							<img alt="Details" id="imgdiv<%# Eval("Id") %>" src="../../Imagenes/plus.png" />
						</a>
						<div id="div<%# Eval("Id") %>" style="display: none;">
							<asp:GridView ID="TratamientosGridView" runat="server" AutoGenerateColumns="false"
								DataKeyNames="IdPaciente" CssClass="col-xs-12" OnRowCommand="TratamientosGridView_RowCommand"
								RowStyle-HorizontalAlign="Center">
								<Columns>
									<asp:BoundField DataField="IdPaciente" HeaderText="Id" Visible="false" />
									<asp:BoundField ItemStyle-Width="50px" DataField="Fecha" HeaderText="Fecha" DataFormatString="{0:dd/MM/yyyy}" />
									<asp:BoundField ItemStyle-Width="50px" DataField="Pieza" HeaderText="Pieza" />
									<asp:TemplateField>
										<HeaderTemplate>
											Tratamiento
										</HeaderTemplate>
										<ItemTemplate>
											<asp:TextBox runat="server" ID="descrTratamientoTextBox" Text='<%# Eval("Descripcion")%>'
												TextMode="MultiLine" CssClass="form-control disabled" ReadOnly="true">
											</asp:TextBox>
										</ItemTemplate>
									</asp:TemplateField>
									<asp:ButtonField CommandName="editChildRecord" ControlStyle-CssClass="btn btn-info btn-group-justified"
										ButtonType="Button" Text="Consultar"></asp:ButtonField>
								</Columns>
								<EmptyDataTemplate>
									<div class="alert-danger">
										<asp:Label runat="server" ID="TratamientosEmptyLabel" Text='<%#EmptyText() %>'></asp:Label>
									</div>
								</EmptyDataTemplate>
							</asp:GridView>
						</div>
					</ItemTemplate>
				</asp:TemplateField>
				<asp:BoundField DataField="Nombre" HeaderText="Nombre" ItemStyle-Width="100px" />
				<asp:BoundField DataField="Apellido" HeaderText="Apellido" ItemStyle-Width="100px" />
			</Columns>
			<EmptyDataTemplate>
				<div class="alert-danger">
					<asp:Label runat="server" ID="PacientesEmptyLabel" Text='<%#EmptyText() %>'></asp:Label>
				</div>
			</EmptyDataTemplate>
		</cc1:PagingGridView>
		<div id="mensajeModal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							×</button>
						<h3 id="H1">
							Mensaje</h3>
					</div>
					<div class="modal-body">
						<asp:Label ID="MensajeLabel" runat="server">
						</asp:Label>
					</div>
					<div class="modal-footer">
						<button class="btn btn-info" data-dismiss="modal">
							Aceptar</button>
					</div>
				</div>
			</div>
		</div>
		<div id="editChildModal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-dialog modal-lg">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">
							×</button>
						<h3 id="editCjildModalLabel">
							Consulta de tratamiento</h3>
					</div>
					<div class="modal-body">
						<div class="row">
							<div class="col-xs-2  text-right">
								Id :
							</div>
							<div class="col-xs-10">
								<asp:Label runat="server" ID="IdPacienteUpdateLabel" CssClass="form-control">
								</asp:Label>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-2 text-right">
								Fecha :
							</div>
							<div class="col-xs-10">
								<input type="text" name="FechaChildTextBoxEdit" class="date form-control" runat="server"
									id="FechaChildTextBoxEdit" disabled />
							</div>
						</div>
						<div class="row">
							<div class="col-xs-2  text-right">
								Pieza :
							</div>
							<div class="col-xs-10">
								<input type="text" name="PiezaTextBoxUpdate" runat="server" id="PiezaTextBoxUpdate"
									class="form-control masked99" disabled/>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-2 text-right">
								Descripción:
							</div>
							<div class="col-xs-10">
								<asp:TextBox ID="DescrUpdateTextBox" runat="server" TextMode="MultiLine" CssClass="form-control" ReadOnly></asp:TextBox>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-2 text-right">
								Imágenes
							</div>
							<div class="col-xs-5" id="ImagenesDiv">
								<asp:Literal ID="ImagenesLiteral" runat="server"></asp:Literal>
							</div>
							<div class="col-xs-5">
								<div class="row">
									<div class="col-xs-12">
									</div>
								</div>
								<div class="row">
									<div class="col-xs-12">
										<div id="dvProgess">
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-xs-12">
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<asp:Label ID="lblResultChild" Visible="false" runat="server"></asp:Label>
						<button class="btn btn-info" data-dismiss="modal">
							Salir</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</asp:Content>
<asp:Content ID="ScriptsGrillaContent" ContentPlaceHolderID="ScriptContent" runat="server">
	<script src="../../Scripts/imgpreview.full.jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$('input.masked99').mask('99');
			$('input.date').datepicker($.datepicker.regional["es"]).mask('99/99/9999');
			PrevisualizarImagenes();
		});

		function divexpandcollapse(divname) {
			var img = "img" + divname;
			if ($("#" + img).attr("src") == "../../Imagenes/plus.png") {
				$("#" + img)
				.closest("tr")
				.after("<tr><td></td><td colspan=7>" + $("#" + divname)
				.html() + "</td></tr>");
				$("#" + img).attr("src", "../../Imagenes/minus.png");
			} else {
				$("#" + img).closest("tr").next().remove();
				$("#" + img).attr("src", "../../Imagenes/plus.png");
			}
		}

		var currFile = 0;
		var totalFileCount = 0;
		function sendFile(file) {
			$.ajax({
				url: 'handler/FileUploader.ashx?FileName=' + file.name + '&Dir=' + $("#MainContent_IdPacienteUpdateLabel").text() + '&Fecha=' + $("#MainContent_FechaChildTextBoxEdit").val() + "&mimeType=" + file.type, //server script to process data
				type: 'POST',
				xhr: function () {
					myXhr = $.ajaxSettings.xhr();
					if (myXhr.upload) {
						myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
					}
					return myXhr;
				},
				success: function (result) {
					//On success if you want to perform some tasks.
					ActualizarArchivos();

				},
				data: file,
				cache: false,
				contentType: file.type,
				processData: false
			});
			function progressHandlingFunction(e) {
				if (e.lengthComputable) {
					var s = parseInt((e.loaded / e.total) * 100) + '%';
					$("#progress" + currFile).text(s);
					if (s == '100%') {
						triggerNextFileUpload();
					}
				}
			}
		}

		function triggerNextFileUpload() {
			if (currFile < totalFileCount - 1) {
				currFile = currFile + 1;
				sendFile($("#fileInput")[0].files[currFile]);
			}
			else {
				$("#fileInput").replaceWith($("#fileInput").clone());
			}
		}

		function FileSelected() {
			$("#dvProgess").html('');
			totalFileCount = $("#fileInput")[0].files.length;
			for (j = 0; j < totalFileCount; j++) {
				var progControl = $("#dvProgess").append($("#fileInput")[0].files[j].name + "<div class=\"row\"><div class=\"col-xs-12\"><div id='progress" + j + "'></div></div></div>");
			}
		}

		function uploadFile() {
			currFile = 0;
			sendFile($("#fileInput")[0].files[0]);
		}

		function ActualizarArchivos() {
			var name = document.getElementById('<%=IdPacienteUpdateLabel.ClientID %>').textContent;
			var address = document.getElementById('<%=FechaChildTextBoxEdit.ClientID %>').value;

			PageMethods.ActualizarArchivos(name, address, onSucess, onError);
			function onSucess(result) {
				$("#ImagenesDiv").html(result);
				$("#dvProgess").html('');
				PrevisualizarImagenes();
			}

			function onError(result) {
				alert('Something wrong.');
			}
		}

		function PrevisualizarImagenes() {
			$('ul#ImagenesSubidas a').imgPreview({
				containerID: 'imgPreviewWithStyles',
				imgCSS: {
					// Limit preview size:
					height: 300
				},
				// When container is shown:
				onShow: function (link) {
					// Animate link:
					$(link).stop().animate({ opacity: 0.4 });
					// Reset image:
					$('img', this).css({ opacity: 0 });
				},
				// When image has loaded:
				onLoad: function () {
					// Animate image
					$(this).animate({ opacity: 1 }, 300);
				},
				// When container hides:
				onHide: function (link) {
					// Animate link:
					$(link).stop().animate({ opacity: 1 });
				}
			});
		}
	</script>
</asp:Content>